<template>	
	<view class='pages'>			
		<view class='father_view'> 
			<view class='son_view'> 
			  <view class="title-bg">需要转换的文本：</view>
			  <textarea class="textarea-bg" v-model="text1" @blur="inputText"  placeholder="请在这里输入" /> 
			</view>
		</view>
		
		<!-- 二维码 -->
		<view class="qr-box">
			<canvas canvas-id="qrcode" v-show="qrShow" style="width: 300rpx;margin: 0 auto;"/>
		</view>		
			
		<button @click='btn'>生成二维码</button>				
	</view>		
</template>

<script>
	import uQRCode from '@/common/uqrcode.js' //引入uqrcode.js
	export default {
		data() {
			return {
				qrShow: false,				
				text1:''
			}
		},
				
		methods: {	
			//*获取文本框内容*//
			inputText:function (e) {
				this.text1 = e.detail.value	
			},
		
			//*按钮*//
			btn: function () {										
				if (this.text1 == '' ) {
					uni.showToast({  //显示对话框
						title: "请输入文本",
						icon: 'none',
						duration: 1000,
					})
				} else {
					this.qrFun(this.text1) //调用二维码方法
				}
			},
			
			//**生成二维码**//
			qrFun: function(text) {
				this.qrShow = true
				uQRCode.make({
					canvasId: 'qrcode',
					componentInstance: this,
					text: text,
					size: 150,
					margin: 0,
					backgroundColor: '#ffffff',
					foregroundColor: '#000000',
					fileType: 'jpg',
					errorCorrectLevel: uQRCode.errorCorrectLevel.H,
					success: res => {}
				})
			}
		}
	}
</script>

<style>	
	.pages {
		width: 98%;
		margin: auto;
		overflow: hidden;
	}	
	
	/* 多行文本 */
	textarea {
		width: 98%;
		height: 250rpx;
		margin-left: 10rpx;
		margin-right: 10rpx;
		margin-top: 10rpx;
	}
	
	.textarea-bg {
		width: 94%;
		border-style: solid;
		border-color: #ff007f;
		font-size: 32rpx;
	}
	
	button {
		width: 80%;
		margin-top: 180rpx;
		background-color: #ffaa00;
	}
	
	.qr-box {
		width: 400rpx;
		height: 460rpx;
		margin: 0 auto;
		margin-top: 20rpx;
	}
</style>


